/* components */
import { 
  BaseSelectUserSelectPanelContainer,
  BaseSelectUserSelectPanelLeft,
  BaseSelectUserSelectPanelRight,
  BaseSelectUserProjectTeamLeft,
  BaseSelectUserProjectTeamRight
} from '@src/component/common/BaseSelectUser/components'

/* enum */
import { 
  BaseSelectUserComponentNameEnum,
} from '@src/component/common/BaseSelectUser/model'


/* hooks */
import { useFetchProjectTeamList, useFetchProjectTeamUserList } from '@src/component/common/BaseSelectUser/hooks'
import {
  useBaseSelectUserStoreProjectTeamList,
  useBaseSelectUserStoreCurrentToggleProjectTeam
} from '@src/component/common/BaseSelectUser/store'

/* scss */
import '@src/component/common/BaseSelectUser/components/ProjectTeam/index.scss'

/* vue */
import { defineComponent, CreateElement, onBeforeMount, PropType } from 'vue'

/* util */
import { findComponentDownward } from '@src/util/assist'
import Log from '@src/util/log'
import { getDefaultSelectProjectTeamList } from '@src/component/common/BaseSelectUser/util'

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserProjectTeamTab,
  emits: [],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  setup() {
    // 项目组列表
    const fetchProjectTeamList = useFetchProjectTeamList();
    // 项目组人员列表
    const fetchProjectTeamUserList = useFetchProjectTeamUserList();
    
    // 当前选择的项目
    const { setCurrentToggleProjectTeam } = useBaseSelectUserStoreCurrentToggleProjectTeam()
    // 项目列表
    const { projectTeamList } = useBaseSelectUserStoreProjectTeamList()

    // 初始化
    const initiate = () => {
      fetchProjectTeamList().then(() => {

        const firstProjectTeam = getDefaultSelectProjectTeamList(projectTeamList.value)
        setCurrentToggleProjectTeam(firstProjectTeam)

      })
      fetchProjectTeamUserList()
    }

    onBeforeMount(() => {
      initiate()
    })
  },
  methods: {
    onLoadProjectTeamListHandler() {
      
      const baseSelectUserInfiniteScrollUserComponent = findComponentDownward(this, BaseSelectUserComponentNameEnum.BaseSelectUserInfiniteScrollUser)
      
      try {
        baseSelectUserInfiniteScrollUserComponent.$el.scrollTop = 0
      } catch (error) {
        Log.error(error, this.onLoadProjectTeamListHandler.name)
      }
      
    }
  },
  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserProjectTeamTab}>
        <BaseSelectUserSelectPanelContainer>

          <BaseSelectUserSelectPanelLeft>
            <BaseSelectUserProjectTeamLeft 
              is-multi={this.isMulti}
              onLoadUser={this.onLoadProjectTeamListHandler}
            />
          </BaseSelectUserSelectPanelLeft>

          <BaseSelectUserSelectPanelRight>
            <BaseSelectUserProjectTeamRight is-multi={this.isMulti}/>
          </BaseSelectUserSelectPanelRight>
        </BaseSelectUserSelectPanelContainer>
      </div>
    )
  }
})